<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../lib/layui-v2.8.11/layui/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        body {
            background: #1E9FFF;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-container {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .admin-login-background {
            width: 360px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

        .logo-title h1 {
            color: #1E9FFF;
            font-size: 25px;
            font-weight: bold;
        }

        .login-form {
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }

        .login-form .layui-form-item {
            position: relative;
        }

        .login-form .layui-form-item label {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }

        .login-form .layui-form-item input {
            padding-left: 36px;
        }

        .captcha {
            width: 60%;
            display: inline-block;
        }

        .captcha-img {
            display: inline-block;
            width: 34%;
            float: right;
        }

        .captcha-img img {
            height: 34px;
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <div class="admin-login-background">
            <div class="layui-form login-form">
                <form class="layui-form" action="">
                    <div class="layui-form-item logo-title">
                        <h1>厦门四联网关后台登录</h1>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-username" for="username"></label>
                        <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱"
                            autocomplete="off" class="layui-input" value="admin">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-password" for="password"></label>
                        <input type="password" name="password" lay-verify="required|password" placeholder="密码"
                            autocomplete="off" class="layui-input" value="admin">
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                        <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码"
                            autocomplete="off" class="layui-input verification captcha" value="xszg">
                        <div class="captcha-img">
                            <img id="captchaPic" src="../images/captcha.jpg">
                        </div>
                    </div> -->
                    <div class="layui-form-item">
                        <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                            lay-filter="login">登 入</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../lib/layui-v2.8.11/layui/layui.js" charset="utf-8"></script>
    <script src="../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <script src="../js/ajaxRequest.js" charset="utf-8"></script>
    <script src="../js/api.js" charset="utf-8"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;

            // 登录过期的时候，跳出ifram框架
            if (top.location != self.location) top.location = self.location;

            // 粒子线条背景
            $(document).ready(function () {
                $('.layui-container').particleground({
                    dotColor: '#7ec7fd',
                    lineColor: '#7ec7fd'
                });
            });

            // 进行登录操作
            form.on('submit(login)', function (data) {
                var loading = layer.load(1, {
                    shade: [0.5, '#fff']
                });
                data = data.field;
                if (data.username == '') {
                    layer.msg('用户名不能为空');
                    return false;
                }
                if (data.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (data.captcha == '') {
                    layer.msg('验证码不能为空');
                    return false;
                }
                var loginurl = Login()
                console.log("Login", loginurl)
                // 示例：发送 GET 请求
                const postData = { username: data.username, password: data.password };
                $.ajax({
                    url: loginurl,
                    type: "POST",
                    dataType: "json",
                    data: postData,
                    //JSON.stringify(data.field),
                    success: function (data) {
                        console.log("data", data)
                        if (data.code === 0) {
                            //缓存token
                            localStorage.setItem('token', data.data)
                            layer.msg('登录成功', { icon: 1, time: 500 }, function () {
                                if (localStorage.getItem('Url') != null) {
                                    window.location = localStorage.getItem('Url');
                                    localStorage.removeItem('Url');
                                } else {
                                    window.location = '../index.html';
                                }
                            });

                        }
                        else {
                            layer.close(loading);
                            console.log("error", data.msg)
                            layer.msg(data.msg, {
                                icon: 2
                            });
                        }
                    }
                });

                //   sendAjaxRequest('POST', Login, null);

                // 示例：发送 POST 请求
                //   const postData = { name: 'John', age: 30 };
                //   sendAjaxRequest('POST', '/api/save', postData);
                // 
                return false;
            });
        });
    </script>
</body>

</html>


<!-- <div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加服务配置 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="../js/ajaxRequest.js" charset="utf-8"></script>
<script>
    // sendAjaxRequest('GET', '/Serial/GetSerialInfo', null);
    layui.use(['form', 'table', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;
        table.render({
            elem: '#currentTableId',
            url: '/Serial/GetSerialInfo',
            headers:SetRequestHeader(),
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                [{
                    type: "checkbox",
                    width: 50
                }, {
                    field: 'Agreement',
                    width: 150,
                    title: '串口名称',
                }, {
                    field: 'type',
                    width: 150,
                    title: '波特率'
                }, {
                    field: 'host',
                    width: 150,
                    title: '数据位',
                }, {
                    field: 'desc',
                    minWidth: 150,
                    title: '校验方式'
                }, {
                    field: 'desc',
                    minWidth: 150,
                    title: '停止位'
                }
                ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: false,
            skin: 'line',
            parseData: function (res) {
                console.log("res", res)
                CheckLogin(res)

            }
        });

        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                },
                where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') { // 监听添加操作
                var content = miniPage.getHrefContent('page/cservices/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加云服务配置',
                    type: 1,
                    shade: 0.2,
                    maxmin: false,
                    shadeClose: true,
                    area: ["750px", "570px"],
                    // offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
            } else if (obj.event === 'delete') { // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId'),
                    data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var content = miniPage.getHrefContent('page/cservices/edit.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '编辑云服务配置',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ["750px", "570px"],
                    //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除？', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script> -->
<!-- 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基础菜单 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.8.11/layui/css/layui.css">
</head>
<body class="layui-bg-gray">
<div class="layui-panel" style="width: 260px; margin: 16px;">
  <ul class="layui-menu" id="demo-menu">
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
      <div class="layui-menu-body-title">
        COM2 <i class="layui-icon layui-icon-up"></i>
      </div>
      <ul>
        <li lay-options="{id: 103}">
          <div class="layui-menu-body-title">属性</div>
        </li>
        <li><div class="layui-menu-body-title">地址位1</div></li>
        <li><div class="layui-menu-body-title">地址位2</div></li>
      </ul>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
        <div class="layui-menu-body-title">
          COM4 <i class="layui-icon layui-icon-up"></i>
        </div>
        <ul>
            <li lay-options="{id: 103}">
              <div class="layui-menu-body-title">属性</div>
            </li>
            <li><div class="layui-menu-body-title">地址位1</div></li>
            <li><div class="layui-menu-body-title">地址位2</div></li>
          </ul>
      </li>
    
  </ul>
</div>
<script src="../lib/layui-v2.8.11/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['dropdown', 'layer', 'util'], function(){
  var dropdown = layui.dropdown;
  var layer = layui.layer;
  var util = layui.util;
  // 菜单点击事件
  dropdown.on('click(demo-menu)', function(options){
    console.log(this, options);
    
    // 显示 - 仅用于演示
    layer.msg(util.escape(JSON.stringify(options)));
  });
});
</script>
</body>
</html> -->